<template>
    <div class="card-container">
        <el-tabs v-model="activeName" >
            <el-tab-pane :label="$t('card.title')" name="1">
                <div class="search-box">
                  <div class="search-box-sub">
                    <span class="lable-text">{{$t('devWifi.wifiSN')}}</span>
                    <el-input v-model="searchData.wifiSN" clearable></el-input>
                  </div>
                  <div class="search-box-sub">
                    <span class="lable-text">{{$t('card.msisdn')}}</span>
                    <el-input v-model="searchData.msisdn" clearable></el-input>
                  </div>
                  <div class="search-box-sub">
                    <span class="lable-text">{{$t('card.iccid')}}</span>
                    <el-input v-model="searchData.iccid" clearable></el-input>
                  </div>
                  <div class="search-box-sub" v-if="userType!=5">
                    <span class="lable-text">{{$t('card.cardType')}}</span>
                    <el-select v-model="searchData.cardType" filterable clearable :placeholder="$t('pleaseSelect')">
                      <el-option
                        v-for="item in cardTypeArray"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  
                  <div class="search-box-sub" v-if="userType!=5">
                    <span class="lable-text">{{$t('card.userStatus')}}</span>
                    <el-select v-model="searchData.userStatus" filterable clearable :placeholder="$t('pleaseSelect')">
                      <el-option
                        v-for="item in userStatusArray"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="search-box-sub">
                    <span class="lable-text">{{$t('card.arrearage')}}</span>
                    <el-select v-model="searchData.arrearage" filterable clearable :placeholder="$t('pleaseSelect')">
                      <el-option
                        v-for="item in arrearageArray"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="search-box-sub" v-if="userType!=5">
                    <span class="lable-text">{{$t('card.associated')}}</span>
                    <el-select v-model="searchData.associated" filterable clearable :placeholder="$t('pleaseSelect')">
                      <el-option
                        v-for="item in associatedArray"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="search-box-sub">
                    <span class="lable-text">{{$t('card.balance_query')}}</span>
                    <el-input v-model="searchData.minBalance" clearable></el-input>-
                    <el-input v-model="searchData.maxBalance" clearable></el-input>
                  </div>
                  <div class="search-box-sub">
                    <span class="lable-text">{{$t('card.used_flow_query')}}</span>
                    <el-input v-model="searchData.minUsedFlow" clearable></el-input>-
                    <el-input v-model="searchData.maxUsedFlow" clearable></el-input>
                  </div>
                  <div class="search-box-sub">
                    <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
                    <el-button @click='exportCard' >{{$t('export')}}</el-button>
                  </div>
              </div>
              <div class="button-box" v-if="userType!=5">
                  <el-button @click="orderByUserdGprs">{{$t('card.orderByUsedGprs')}}</el-button>
                  <el-button @click="()=>{$store.commit('setVisibleShow',true)}">{{$t('import')}}</el-button>
                  <el-button @click="downLoadTemplate(1)">{{$t('downloadTemplates')}}</el-button>
                  <!-- <el-button @click="downLoadTemplate(2)">{{$t('downloadVTemplates')}}</el-button> -->
              </div>
              <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true' :current="current" :size="size">
                  <template #cardType="{data}">
                    {{UtilsFun.getValueByCode(cardTypeArray,data.cardType)}}
                  </template>
                  <template #userStatus="{data}">
                    {{UtilsFun.getValueByCode(userStatusArray,data.userStatus)}}
                  </template>
                  <template #usedGprs="{data}">
                    {{(data.usedGprs/1024).toFixed(2)}}
                  </template>
                  <template #leftGprs="{data}">
                    {{(data.leftGprs/1024).toFixed(2)}}
                  </template>
                  <template #option="{data}">
                    <div class="option-box">
                      <el-button size='small' type="primary" :title="$t('card.lineChart')" @click='gotoChart(data)'><i class="iconfont icon-line" ></i></el-button>
                      <!-- <el-button size='small' type="primary" :title="$t('card.pay')" @click='editUsers(data)' v-show="data.wifiSN"><i class="iconfont icon-chongzhi" ></i></el-button> -->
                      <el-popconfirm
                          :title="$t('index.delete_item_confirm')+'?'"
                          @confirm='deleteSub(data.sid)'
                      >
                          <el-button type="danger" slot="reference" icon='el-icon-delete' :title="$t('delete')" v-show="data.userStatus=='99'"></el-button>
                      </el-popconfirm>
                    </div>
                  </template>
              </baseTable>
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
              </el-pagination>
            </el-tab-pane>

            <el-tab-pane :label="$t('devWifi.unrelatedModule')" name="2">
              <modulePage ref="module"></modulePage>
            </el-tab-pane>
        </el-tabs>
        
        <import-modal :cardTypeArray="cardTypeArray" @uploadPage='uploadPage'></import-modal>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import modulePage from './associatedModule'
import importModal from './import'
export default {
    components: {
        baseTable,
        modulePage,
        importModal,
    },
    props: {

    },
    data() {
        return {
            activeName:'1',
            searchData:{
                wifiSN:'',
                msisdn:'',
                iccid:'',
                minBalance:'',
                maxBalance:'',
                minUsedFlow:'',
                maxUsedFlow:'',
                cardType:'',
                userStatus:'',
                arrearage:'',
                associated:'',
                isOrder:0//是否根据已用流量排序
            },
            userType:JSON.parse(sessionStorage.getItem('userObj')).userType,
            cardTypeArray:[],
            userStatusArray:[],
            arrearageArray:[],
            associatedArray:[],
            rowDataList:{},
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('devWifi.wifiSN'),
                value: 'wifiSN',
            },{
                title: this.$t('user.loginName'),
                value: 'loginName'
            },{
                title: this.$t('card.cardType'),
                value: 'cardType',
                slot: 'cardType'
            },{
                title: this.$t('card.msisdn'),
                value: 'msisdn'
            },{
                title: this.$t('card.iccid'),
                value: 'iccid'
            },{
                title: this.$t('card.imsi'),
                value: 'imsi'
            },{
                title: this.$t('card.userStatus'),
                value: 'userStatus',
                slot: 'userStatus'
            },{
                title: this.$t('card.usedGprs'),
                value: 'usedGprs',
                slot: 'usedGprs'
            },{
                title: this.$t('card.leftGprs'),
                value: 'leftGprs',
                slot: 'leftGprs'
            },{
                title: this.$t('card.balance'),
                value: 'balance',
                slot: 'balance'
            },{
                title: this.$t('control'),
                width:'80px',
                slot: 'option'
            }],
            size:10,
            current:1,
            total:1,
        };
    },
    computed: {
        visibleAdd(){
            return this.$store.state.sysStore.visibleAdd
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch();
        let that=this;
        document.onkeydown = function(e){
          if(e.keyCode == 13){
            if(that.activeName==1){
              that.query()
            }else{
              console.log(that.$refs)
              that.$refs.module.query()
            }
          }
        }
    },
    methods: {
        async deleteSub(id){
            let res = await this.API.gprsDeleteGprsInfo({
                id:id
            })
            if(res.success){
                this.$message.success(this.$t('index.control_success'))
            }else{
                this.$message.error(this.$t('index.control_fail'))
            }
            this.initTable()
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'CARD_TYPE,CARD_ASSOCIATED_STATUS,CARD_ARREARAGE_STATUS,CARD_STATUS',
                lang:localStorage.getItem('lang')
            })
            this.cardTypeArray= res.CARD_TYPE
            this.userStatusArray=res.CARD_STATUS
            this.arrearageArray=res.CARD_ARREARAGE_STATUS
            this.associatedArray=res.CARD_ASSOCIATED_STATUS
            this.initTable()
        },
        async initTable(){
            this.loading = true
            let res = await this.API.gprsGetCardInfoPage({
                size: this.size,
                current: this.current,
                ...this.searchData
            })
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        async editUsers(data){
            let res = await this.API.getAgentDataById({
                    id:data.sid
                })
            this.$store.commit('setVisibleEdit',true)
            this.rowDataList = res
        },
        showUser(data){
            this.$store.commit('setVisibleInfo',true)
            this.rowDataList = data
        },
        uploadPage(){
            this.initTable()
        },
        query(isOrder){
            this.searchData.isOrder=isOrder==1?1:0
            let flag_num=this.validation_Num(
                this.searchData.minBalance,
                this.searchData.maxBalance,
                this.searchData.minUsedFlow,
                this.searchData.maxUsedFlow)
            if(flag_num){
                this.current = 1
                this.initTable()
            }
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        },
        validation_Num(strArr){
            var numFlag=true;
            var reg=/^(\-?)\d+(\.\d+)?$/;
            for(var i=0;i<strArr.length;i++){
                if( strArr[i]!='' && !reg.test( strArr[i]) ){
                    this.$message.error(this.$t('card.import_rules'))
                    return false;
                    numFlag=false;
                }
            }
            return numFlag;
        },
        orderByUserdGprs(){
            this.query(1)
        },
        //导出
        exportCard(){
            this.comm.windowOpen('/gprs/exportCard',{
                wifiSN:this.searchData.wifiSN,
                msisdn:this.searchData.msisdn,
                iccid:this.searchData.iccid,
                minBalance:this.searchData.minBalance,
                maxBalance:this.searchData.maxBalance,
                minUsedFlow:this.searchData.minUsedFlow,
                maxUsedFlow:this.searchData.maxUsedFlow,
                cardType:this.searchData.cardType,
                arrearage:this.searchData.arrearage,
                associated:this.searchData.associated,
            })
        },
        //下载模板
        downLoadTemplate(cardType){
            this.comm.windowOpen('/gprs/downLoadTestExcel?cardType='+cardType)
        },
        gotoChart(data){
          this.$router.push({ path: '/cardLineChart', query: {
                  wifiSN: data.wifiSN,
                  msisdn:data.msisdn
              } 
          })
        }
    },
};
</script>

<style lang="less">
.card-container{
  margin-top: -10px;
}
</style>
